<template>
  <div class="container">
    <!-- Header Section -->
    <Header />

    <!-- Main Section -->
    <main class="main">
      <div class="banner">
        <div class="left">
          <h1 class="headline">探索世界，享受旅程</h1>
          <p class="subheadline">会员专享：全球热门目的地酒店最高立省30%</p>
          <div class="benefits">
            <div class="benefit-item">
              <span class="icon">✓</span>
              <span>独家优惠价格</span>
            </div>
            <div class="benefit-item">
              <span class="icon">✓</span>
              <span>免费取消预订</span>
            </div>
            <div class="benefit-item">
              <span class="icon">✓</span>
              <span>积分兑换奖励</span>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="login-card">
            <h2>会员登录</h2>
            <form>
              <div class="form-group">
                <input type="text" v-model="data.username" placeholder="用户名" class="input-field" />
              </div>
              <div class="form-group">
                <input type="password" v-model="data.password" placeholder="登录密码" class="input-field" />
              </div>
              <div class="form-group">
                <div ref="yzm"></div>
              </div>
              <button type="button" @click="login" class="login-btn">登 录</button>
              <div class="social-login">
                <p>或使用以下方式登录</p>
                <div class="social-icons">
                  <a href="#" class="social-icon wechat">微信</a>
                  <a href="#" class="social-icon weibo">微博</a>
                  <a href="#" class="social-icon qq">QQ</a>
                </div>
              </div>
              <div class="extra-options">
                <label class="remember-me">
                  <input type="checkbox" v-model="rememberMe" /> 记住我
                </label>
                <a href="#" class="forgot-password">忘记密码？</a>
              </div>
            </form>
            <div class="register-now">
              还没有账号？<a @click.prevent="toZC" href="#">立即注册</a>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- Footer Section -->
    <Footer />
  </div>
</template>

<script setup>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import {useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
let router = useRouter()
// 跳转到注册
const toZC = () => {
  router.push('/register')
};
let yzm = ref();
// 定义登录对象
let data = reactive({
  username: '',
  password: '',
})
let status=ref( false) // 滑动是否通过

// 加载事件
onMounted(()=>{
  _dx.Captcha(yzm.value, {
    // appId, 在控制台应用管理或应用配置模块获取
    appId: "05e4e0495b6bd88fda37ae0ead5d45f6",
    apiServer: 'https://cap.dingxiang-inc.com',
    style:'oneclick',
    success: token => {
      status.value = true;
    }
  });
})

// 登录
let login = ()=>{
  if(!data.username){
    ElMessage.error('请输入用户名'); return;
  }
  if(!data.password){
    ElMessage.error('请输入密码'); return;
  }
  if(!status.value){
    ElMessage.error('请先通过滑动验证'); return;
  }
  axios.post('/login',data).then(res=>{
    sessionStorage.setItem('token',res.data.token)
    sessionStorage.setItem('userName',res.data.username)
    sessionStorage.setItem('userAvatar',res.data.tx)
    router.push('/index')
  })

}

</script>

<style scoped>
/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

html, body {
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  color: #333;
}

/* Main container */
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Main Content Styles */
.main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 5%;
  background: url('https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;
  background-size: cover;
  position: relative;
}

.main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
}

.banner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 1;
}

.left {
  flex: 1;
  padding: 40px;
  max-width: 600px;
  color: #333;
}

.headline {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
  color: #0066ff;
}

.subheadline {
  font-size: 20px;
  color: #555;
  margin-bottom: 30px;
}

.benefits {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
}

.benefit-item {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #444;
}

.benefit-item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #0066ff;
  color: white;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 14px;
}

.right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 450px;
}

.login-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 40px;
  width: 100%;
  max-width: 400px;
}

.login-card h2 {
  font-size: 24px;
  margin-bottom: 30px;
  color: #333;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.input-field {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  transition: all 0.3s;
  background-color: #f9f9f9;
}

.input-field:focus {
  border-color: #0066ff;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
  background-color: white;
}

.error-msg {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

.login-btn {
  width: 100%;
  padding: 14px;
  background-color: #0066ff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.login-btn:hover {
  background-color: #0052cc;
}

.social-login {
  margin: 25px 0;
  text-align: center;
}

.social-login p {
  color: #888;
  font-size: 14px;
  margin-bottom: 15px;
  position: relative;
}

.social-login p::before,
.social-login p::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background-color: #eee;
}

.social-login p::before {
  left: 0;
}

.social-login p::after {
  right: 0;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.3s;
}

.social-icon:hover {
  transform: translateY(-3px);
}

.wechat {
  background-color: #07C160;
}

.weibo {
  background-color: #E6162D;
}

.qq {
  background-color: #12B7F5;
}

.extra-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  font-size: 14px;
}

.remember-me {
  display: flex;
  align-items: center;
  color: #666;
}

.remember-me input {
  margin-right: 5px;
}

.forgot-password {
  color: #0066ff;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

.register-now {
  text-align: center;
  margin-top: 25px;
  color: #666;
  font-size: 14px;
}

.register-now a {
  color: #0066ff;
  text-decoration: none;
  font-weight: 500;
}

.register-now a:hover {
  text-decoration: underline;
}

/* Responsive Styles */
@media (max-width: 992px) {
  /*
  .footer-content {
    justify-content: flex-start;
  }

  .footer-section {
    flex: 0 0 50%;
  }
  */
}

@media (max-width: 768px) {
  /*
  header {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }

  .nav-links {
    gap: 15px;
  }
  */
  .banner {
    flex-direction: column;
    align-items: center;
    .left {
      text-align: center;
      padding: 20px;
      margin-bottom: 30px;
    }

    .benefits {
      align-items: center;
    }

    .login-card {
      padding: 30px;
    }
  }
}

@media (max-width: 576px) {
  /*
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .header-right {
    width: 100%;
    justify-content: center;
  }

  .footer-section {
    flex: 0 0 100%;
    text-align: center;
  }

  .footer-section h3::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .download-btns {
    justify-content: center;
  }

  .certificates {
    flex-direction: column;
    gap: 5px;
  }
  */
  .headline {
    font-size: 32px;
  }

  .subheadline {
    font-size: 18px;
  }
}
</style>